<template>
  <div class="page-infinite">
    <h1 class="page-title">Infinite Scroll</h1>
    <p class="page-infinite-desc">当即将滚动至列表底部时, 自动加载更多数据</p>
      <router-link to="/article">
         <h1>我要去详情页,如果组件里面没有清除全局事件我还是会继续的</h1>
     </router-link>
    <div class="page-infinite-wrapper" ref="wrapper" >
      <ul class="page-infinite-list" v-infinite-scroll-test="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="50">
        <li v-for="item in list" class="page-infinite-listitem">{{ item }}</li>
      </ul>
      <p v-show="loading" class="page-infinite-loading">
        加载中...
      </p>
    </div>
  
  </div>
</template>
<script type="text/babel">
import Vue from 'vue'
import InfiniteScrolls from '../plugins/infinit-scroll/test_index.js';
Vue.use(InfiniteScrolls);
  export default {
    data() {
      return {
        list: [],
        loading: false,
        allLoaded: false,
        wrapperHeight: 0
      };
    },
    methods: {
      loadMore() {
        this.loading = true;
         console.log("1")
        setTimeout(() => {
          let last = this.list[this.list.length - 1];
          for (let i = 1; i <= 10; i++) {
            this.list.push(last + i);
          }
          this.$nextTick(function(){
            this.loading = false;
          })
        }, 2500);
      }
    },
    mounted() {
      this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top;
      for (let i = 1; i <= 5; i++) {
        this.list.push(i);
      }
    }
  };
</script>